<template>
	<view>
		<view class="bg-white nav margin-bottom">
			<view class="flex text-center">
				<view v-for="(item,index) in orderStatus" :key="index" class="cu-item flex-sub"
					:class="TabCur==index?'text-green cur':''" @click="tabSelect(index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption" :up="upOption">
			<view v-for="(item, index) in list" :key="index" class="margin-bottom">
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						<image class="cu-avatar round sm" style="margin-left: 0;" :src="item.seller.avatar"
							mode="aspectFill">
						</image>
						<view class="padding-left-xs">{{item.seller.nickname}}</view>
					</view>
					<view class="action">
						<text v-if="item.status == 0" class="text-red">待付款</text>
						<text v-if="item.status == 1" class="text-blue">待发货</text>
						<text v-if="item.status == 2" class="text-cyan">待收货</text>
						<text v-if="item.status == 3" class="text-orange">待评价</text>
						<text v-if="item.status == 4" class="text-green">已完成</text>
						<text v-if="item.status == 9" class="text-grey">已取消</text>
					</view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item" @click="toOrder(item.id)">
						<image class="cu-avatar lg" :src="item.goods.pic[0]" mode="aspectFill"></image>
						<view class="content flex-sub">
							<view class="text-cut">{{item.goods.title}}</view>
							<view class="flex margin-top-xs justify-between">
								<view class="text-price text-lg">{{item.goods.price}}</view>
								<view>x1</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white solid-bottom">
					<view class="action ">
						总金额：<text class="text-price text-red text-xl">{{item.amount}}</text>
					</view>
					<view v-if="item.status == 0" class="action">
						<view class="cu-btn text-gray margin-right" @click="cancel(item.id)">
							取消订单
						</view>
						<view @click="payOrder(item.id)" class="cu-btn bg-red">
							立即支付
						</view>
					</view>
					<view v-else-if="item.status == 1" class="action">
						<view @click="remind(item.id)" class="cu-btn bg-blue">
							提醒发货
						</view>
					</view>
					<view v-else-if="item.status == 2" class="action">
						<view class="cu-btn bg-cyan">
							查看物流
						</view>
					</view>
					<view v-else-if="item.status == 3" class="action">
						<navigator hover-class="none" :url="'/pages/goods/comment/add?order_id='+item.id"
							class="cu-btn bg-orange">
							立即评价
						</navigator>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import OrderApi from "@/api/order";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				orderStatus: [{
						name: '全部订单',
						status: -1,
						num: 2
					}, {
						name: '待付款',
						status: 0,
						icon: 'cuIcon-pay',
						num: 2
					},
					{
						name: '待发货',
						status: 1,
						icon: 'cuIcon-send',
						num: 0
					},
					{
						name: '待收货',
						status: 2,
						icon: 'cuIcon-deliver',
						num: 0
					},
					{
						name: '待评价',
						status: 3,
						icon: 'cuIcon-comment',
						num: 0
					},
				],
				TabCur: 0,
				mescroll: null,
				upOption: {},
				downOption: {
					use: false
				},
				list: [],
			}
		},
		onLoad(option) {
			if (option.tab) {
				this.TabCur = option.tab;
			}
		},
		methods: {
			tabSelect(val) {
				this.TabCur = val;
				uni.navigateTo({
					url: '/pages/order/list?tab=' + val
				});
			},
			upCallback(page) {
				if (page.num == 1) {
					this.list = [];
				}
				OrderApi.list({
					status: this.orderStatus[this.TabCur].status,
					page: page.num,
					page_size: page.size
				}).then((res) => {
					this.list = this.list.concat(res.data);
					this.mescroll.endBySize(res.data.length, res.total);
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			toOrder(id) {
				uni.navigateTo({
					url: '/pages/order/order?id=' + id
				});
			},
			cancel(id) {
				OrderApi.cancel(id).then((res) => {
					this.mescroll.resetUpScroll();
				})
			},
			remind(id) {
				uni.showToast({
					title: "已提醒发货，请耐心等待",
					duration: 2000,
					icon: "none"
				});
			},
			payOrder(id) {
				OrderApi.pay(id).then((res) => {
					this.onPay(res)
				})
			},
			onPay(jsSdk) {
				UserApi.jssdk({
					url: window.location.href
				}).then((res) => {
					jWeixin.config({
						debug: false,
						appId: res.appId, // 必填，公众号的唯一标识
						timestamp: res.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.nonceStr, // 必填，生成签名的随机串
						signature: res.signature, // 必填，签名
						jsApiList: res.jsApiList // 必填，需要使用的JS接口列表
					});
					jWeixin.ready(() => {
						jWeixin.chooseWXPay({
							timestamp: jsSdk.timeStamp,
							nonceStr: jsSdk.nonceStr,
							package: jsSdk.package,
							signType: jsSdk.signType,
							paySign: jsSdk.paySign, // 支付签名
							success: (payRes) => {
								// 支付成功后的回调函数
								uni.navigateTo({
									url: '/pages/order/success?order_id=' + jsSdk
										.order_id
								});
							}
						});
					});
				})
			},
		}
	}
</script>

<style>

</style>
